import { pageAppoint } from '@/services/api/api-assess-week-emphasize-appoint';
import { ActionType, DrawerForm, ProColumns, ProTable } from '@ant-design/pro-components';
import { Button, Select, Space } from 'antd';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import customParseFormat from 'dayjs/plugin/customParseFormat';
import React, { useRef, useState } from 'react';
import { useAccess } from 'umi';
dayjs.extend(customParseFormat);

interface TableAppointSourceProps {}

const TableAppointSource: React.FC<TableAppointSourceProps> = ({}) => {
  const access = useAccess();
  const actionRef = useRef<ActionType>();

  const [searchParam, setSearchParamState] = useState({
    dataName: '',
    type: [],
    datahubChannelIds: [],
  });

  const columns: ProColumns<AssessWeekEmphasizeAppointSourceData.PageAppointSource>[] = [
    {
      title: (
        <span
          style={{
            color: '#99a3b7',
            fontSize: 12,
            textAlign: 'center',
            fontWeight: 'normal',
          }}
        >
          层级
        </span>
      ),
      dataIndex: 'datahubLevelName',
      align: 'center',
      width: '120px',
    },
    {
      title: (
        <span
          style={{
            color: '#99a3b7',
            fontSize: 12,
            textAlign: 'center',
            fontWeight: 'normal',
          }}
        >
          类型
        </span>
      ),
      dataIndex: 'type',
      align: 'center',
      width: '85px',
      valueEnum: {
        '1': { text: '官方' },
        '2': { text: '轻骑兵' },
      },
    },
    {
      title: (
        <span
          style={{
            color: '#99a3b7',
            fontSize: 12,
            textAlign: 'center',
            fontWeight: 'normal',
          }}
        >
          平台
        </span>
      ),
      dataIndex: 'datahubChannelName',
      align: 'center',
      width: '120px',
    },
    {
      title: (
        <span
          style={{
            color: '#99a3b7',
            fontSize: 12,
            textAlign: 'center',
            fontWeight: 'normal',
          }}
        >
          账号
        </span>
      ),
      width: '120px',
      dataIndex: 'datahubSourceName',
      align: 'center',
      render: (dom, entity, index, action) => entity.datahubSourceName,
    },
    {
      title: (
        <span
          style={{
            color: '#99a3b7',
            fontSize: 12,
            textAlign: 'center',
            fontWeight: 'normal',
          }}
        >
          区域
        </span>
      ),
      dataIndex: 'areaName',
      align: 'center',
      width: '120px',
    },
  ];

  return (
    <DrawerForm
      key="add_assess_emphasize_record_drawer_form"
      title={'账号管理'}
      drawerProps={{
        width: 800,
        maskClosable: false,
        destroyOnClose: true,
      }}
      layout="horizontal"
      trigger={<Button type="primary">账号管理</Button>}
      submitter={false}
    >
      <ProTable<AssessWeekEmphasizeAppointSourceData.PageAppointSource>
        columns={columns}
        actionRef={actionRef}
        rowKey="id"
        request={async (params = {}, sorter) => {
          const response = await pageAppoint({
            ...params,
            ...searchParam,
          });
          return {
            data: response.data?.data,
            success: true,
            total: response.data?.total,
          };
        }}
        dateFormatter="id"
        defaultSize={'small'}
        pagination={{
          showQuickJumper: true,
          showSizeChanger: true,
          defaultPageSize: 20,
        }}
        search={false}
        options={{
          density: false,
          setting: false,
        }}
        ghost
        scroll={{
          x: '1100px',
        }}
        headerTitle={''}
        toolbar={{
          search: {
            allowClear: true,
            onSearch: (value: string) => {
              setSearchParamState({
                ...searchParam,
                dataName: value,
              });
              actionRef.current?.reloadAndRest();
            },
          },
          filter: (
            <Space>
              <Select
                placeholder="全部类型"
                variant="filled"
                defaultValue={'0'}
                style={{ width: '110px' }}
                options={[
                  { value: '0', label: '全部平台' },
                  { value: '1', label: '官方' },
                  { value: '2', label: '轻骑兵' },
                ]}
                onChange={(value) => {
                  if (value == '0') {
                    setSearchParamState({
                      ...searchParam,
                      type: [],
                    });
                  } else {
                    setSearchParamState({
                      ...searchParam,
                      type: [value],
                    });
                  }

                  actionRef.current?.reloadAndRest();
                }}
              />
              <Select
                placeholder="全部平台"
                variant="filled"
                defaultValue={'0'}
                style={{ width: '110px' }}
                options={[
                  { value: '0', label: '全部平台' },
                  { value: '8117112412962885', label: '微信公众号' },
                  { value: '8117112412962886', label: '微信视频号' },
                  { value: '8117112414076995', label: '微博' },
                  { value: '8117112414994505', label: '抖音' },
                  { value: '8117112419123365', label: '今日头条' },
                ]}
                onChange={(value) => {
                  if (value == '0') {
                    setSearchParamState({
                      ...searchParam,
                      datahubChannelIds: [],
                    });
                  } else {
                    setSearchParamState({
                      ...searchParam,
                      datahubChannelIds: [value],
                    });
                  }

                  actionRef.current?.reloadAndRest();
                }}
              />
            </Space>
          ),
        }}
        // tableExtraRender={(_, data) => (
        //   <Card>
        //     <Descriptions size="small" column={3}>
        //       <Descriptions.Item label="总量">{data.length}</Descriptions.Item>
        //       <Descriptions.Item label="本周">Lili Qu</Descriptions.Item>
        //       <Descriptions.Item label="三周内">
        //         <a>421421</a>
        //       </Descriptions.Item>
        //       <Descriptions.Item label="统计数据">2017-01-10</Descriptions.Item>
        //       <Descriptions.Item label="汇总数据">2017-10-10</Descriptions.Item>
        //     </Descriptions>
        //   </Card>
        // )}
      />
    </DrawerForm>
  );
};
export default TableAppointSource;
